<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no"
          name="viewport">
    <title>我的文件</title>

    <link rel="stylesheet" href="file-manage/dist/modules/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="file-manage/dist/modules/ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="file-manage/dist/modules/fontawesome/web-fonts-with-css/css/fontawesome-all.min.css">

    <link rel="stylesheet" href="file-manage/dist/modules/summernote/summernote-lite.css">
    <link rel="stylesheet" href="file-manage/dist/modules/flag-icon-css/css/flag-icon.min.css">
    <link rel="stylesheet" href="file-manage/dist/css/demo.css">
    <link rel="stylesheet" href="file-manage/dist/css/style.css">
    <link rel="stylesheet" href="file-manage/plug-ins/xcConfirm/css/xcConfirm.css">
    <link rel="stylesheet" href="file-manage/plug-ins/context-menu/css/contextMenu.css">
    <style>
        .files-items {
            margin-top: -20px;
            border-bottom: 1px dashed #bdc3c7;
            border-top: 1px dashed #bdc3c7;
        }

        .files-items:hover {
            background: #F4FBFF;
        }
    </style>

</head>

<body>
<div id="app">
    <div class="main-wrapper">
        <div class="navbar-bg"></div>
        <div class="main-content">
            <section class="section">
                <h1 class="section-header">
                    <div><i class="ion ion-folder"></i> 全部文件 <span style="color: red;font-size: 14px"
                                                                   th:if="${error != null}" th:text="${error}"></span>
                    </div>
                </h1>
                <div class="row">
                    <div class="col-12 col-sm-12 col-lg-12">
                        <div class="card">
                            <div class="card-body">
                                <nav aria-label="breadcrumb" class="empty-space">
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item"><a
                                                th:href="@{/files(fId=${nowFolder.fileFolderId})}"
                                                title="刷新"><i
                                                class="icon ion-refresh"></i></a>
                                        </li>
                                        <li th:class="${nowFolder.fileFolderId == 0?'breadcrumb-item active':'breadcrumb-item'}">
                                                            <span th:if="${nowFolder.fileFolderId == 0}"
                                                                  th:text="根目录"></span><a style="font-weight: bold"
                                                                                          th:if="${nowFolder.fileFolderId != 0}"
                                                                                          href="files">根目录</a></li>
                                        <!--父级目录列表，不包含当前目录-->
                                        <li th:each="l:${location}" class="breadcrumb-item"><a
                                                style="font-weight: bold"
                                                th:href="@{/files(fId=${l.fileFolderId},fName=${l.fileFolderName},path=${l.path})}"
                                                th:text="${l.fileFolderName}"></a></li>
                                        <!--当前目录 非根目录才显示-->
                                        <li th:if="${nowFolder.fileFolderId != 0}"
                                            class="breadcrumb-item active" aria-current="page"
                                            th:text="${nowFolder.fileFolderName}"></li>
                                        <li th:if="${nowFolder.fileFolderId != 0}"
                                            class="breadcrumb-item"><a
                                                th:href="@{/files(fId=-1,path=${nowFolder.path})}"
                                                title="返回上一层"><i
                                                class="icon ion-arrow-return-left"></i></a>
                                        </li>
                                    </ol>
                                </nav>
                                <div class="row" style="margin-top: -10px;">
                                    <div class="col-12 col-sm-12 col-lg-12 table-responsive">
                                        <table class="table tab-bordered text-nowrap" id="files-table">
                                            <tr id="files-table-title" class="empty-space">
                                                <th></th>
                                                <th>名称</th>
                                                <th>类型</th>
                                                <th>扩展名</th>
                                                <th>大小</th>
                                                <!--<th>下载次数</th>-->
                                                <th>上传时间</th>
                                            </tr>
                                            <tr th:each="folder:${folders}" class="files-items folders">
                                                <td><span style="display: none" th:text="${folder.path}"></span><i
                                                        style="font-size: 24px;color: orange"
                                                        class="icon ion-android-folder"></i></td>
                                                <td>
                                                    <a th:href="@{/files(fId=${folder.fileFolderId},fName=${folder.fileFolderName},path=${folder.path})}"
                                                       style="font-weight: 700;color: black"
                                                       th:text="${folder.fileFolderName}"></a>
                                                </td>
                                                <td style="font-weight: 300">文件夹</td>
                                                <td style="font-weight: 300">-</td>
                                                <td style="font-weight: 300">-</td>
                                                <!--<td style="font-weight: 300">-</td>-->
                                                <td style="font-weight: 300"
                                                    th:text="${#dates.format(folder.time,'yyyy-MM-dd HH:mm')}"></td>
                                            </tr>
                                            <tr th:each="f:${files}" class="files-items files">
                                                <td><span style="display: none" th:text="${f.myFilePath}"></span>
                                                    <i style="font-size: 24px;color: #3498db" th:if="${f.type == 1}"
                                                       class="icon ion-document-text"></i>
                                                    <i style="font-size: 24px;color: #28a745" th:if="${f.type == 2}"
                                                       class="icon ion-image"></i>
                                                    <i style="font-size: 24px;color: #FFC107" th:if="${f.type == 3}"
                                                       class="icon ion-ios-videocam"></i>
                                                    <i style="font-size: 24px;color: #dc3545" th:if="${f.type == 4}"
                                                       class="icon ion-ios-musical-notes"></i>
                                                    <i style="font-size: 24px;color: #343A40" th:if="${f.type == 5}"
                                                       class="icon ion-document"></i>
                                                </td>
                                                <td>
                                                    <!--Js报错“Uncaught SyntaxError: missing ) after argument list“-->
                                                    <!--https://blog.csdn.net/weixin_43862596/article/details/124322027-->
                                                    <!--字符串需要拼接单引号 但是路径里面的\，会被擦掉-->
                                                    <!--JavaScript(js)文件路径字符串中丢失"\"斜线的解决方法-->
                                                    <!--<a th:href="'javaScript:download(\''+(${f.myFilePath.replace(\'\\\',\'\\\\\')})+'\')'"-->
                                                    <!--<a th:href="'javaScript:download(\''+(${#uris.escapePathSegment(f.myFilePath)})+'\')'"-->
                                                    <!--虽然会爆红 但是是正确的写法-->
                                                    <!--<a th:href="'javaScript:download(\''+(${#strings.replace(f.myFilePath, '\\' , '\\\\' )})+'\')'"-->
                                                    <a th:href="'javaScript:download(\''+(${#strings.replace(f.myFilePath, '\' , '\\' )})+'\')'"
                                                       style="font-weight: 700;color: black"
                                                       th:text="${f.myFileName}"></a>
                                                </td>
                                                <td style="font-weight: 300" th:if="${f.type == 1}">文档</td>
                                                <td style="font-weight: 300" th:if="${f.type == 2}">图像</td>
                                                <td style="font-weight: 300" th:if="${f.type == 3}">视频</td>
                                                <td style="font-weight: 300" th:if="${f.type == 4}">音乐</td>
                                                <td style="font-weight: 300" th:if="${f.type == 5}">其他</td>
                                                <td style="font-weight: 300" th:text="${f.postfix}"></td>
                                                <td style="font-weight: 300" th:if="${f.lSize > 1024}"
                                                    th:text="${f.lSize/1024 +'MB'}"></td>
                                                <td style="font-weight: 300" th:if="${f.lSize < 1024}"
                                                    th:text="${f.lSize +'KB'}"></td>
                                                <!--<td style="font-weight: 300" th:text="${f.downloadTime} + ' 次'"></td>-->
                                                <td style="font-weight: 300"
                                                    th:text="${#dates.format(f.uploadTime,'yyyy-MM-dd HH:mm')}">
                                                    2020-02-02 15:08
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <div class="float-right">
                                            <a href="javaScript:addFolderElement()"
                                               class="btn btn-sm btn-outline-success"><i class="icon ion-plus"></i>
                                                创建文件夹</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <span id="nowF" style="display: none" th:text="${nowFolder.path}"></span>
                <span id="preF" style="display: none" th:text="${nowFolder.parentFolderId}"></span>
                <span id="tarFolder" style="display: none"></span>
                <span id="tarFile" style="display: none"></span>
            </section>
        </div>
    </div>
</div>

<!--必须联网才能使用-->
<!--<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>-->
<!--<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>-->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script th:inline="javascript">
    $(function () {
        // dblclick 双击 hover 悬停
        $('.folders').dblclick(function () {
            let id = $(this).children("td").children("span").html();
            var location = window.location.href;
            let strings = location.split("?");
            if (id != "") {
                window.location.href = strings[0] + "?path=" + id;
            } else {
                return;
            }
        });
        $('.files').dblclick(function () {
            let id = $(this).children("td").children("span").html();
            if (id != "") {
                download(id);
            } else {
                return;
            }
        });
        $('.folders').hover(function () {
            let id = $(this).children("td").children("span").html();
            $('#tarFolder').html(id);
            $(this).siblings().removeClass('flag');
            $(this).addClass('flag');
            console.log('悬停目录设置id', id)
        }, function () {
        });
        $('.files').hover(function () {
            let id = $(this).children("td").children("span").html();
            $('#tarFile').html(id);
            $(this).siblings().removeClass('flag');
            $(this).addClass('flag');
            console.log('悬停文件设置id', id)
        }, function () {
        });
    });

    function download(id) {
        // 因为这里出错，导致上面的函数没有生效
        // permission = [[${permission}]];
        // if (permission == 2) {
        //     alert("可能因为你的违规操作，您暂时无法下载文件！");
        //     return;
        // }
        // a标签传参 路径中的斜杠没有了
        console.log('download', id);
        // var location = window.location.href;
        // let strings = location.split("moti-cloud");
        // window.location.href = strings[0] + "moti-cloud/downloadFile?time=" + new Date().getTime() + "&tip=" + Math.random() * 1000000 + "&path=" + encodeURI(id);

        var basePath = /*[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]*/;

        console.log('download-basePath', basePath);

        window.location.href = basePath + "/downloadFile?time=" + new Date().getTime() + "&tip=" + Math.random() * 1000000 + "&path=" + encodeURIComponent(id);
    }
</script>
<script src="file-manage/plug-ins/context-menu/js/jquery.contextMenu.min.js"></script>
<script src="file-manage/plug-ins/xcConfirm/js/xcConfirm.js"></script>
<script>
    $(".files").contextMenu({
        width: 100, // width
        itemHeight: 30, // 菜单项height
        bgColor: "#fff", // 背景颜色
        color: "#333", // 字体颜色
        fontSize: 12, // 字体大小
        hoverBgColor: "#3498db", // hover背景颜色
        target: function (ele) { // 当前元素
            console.log(ele);
        },
        menu: [{ // 菜单项
            text: " 下载",
            callback: function () {
                let id = $('#tarFile').html();
                if (id != "") {
                    download(id);
                } else {
                    return;
                }
            }
        },
            {
                text: " 分享",
                callback: function () {
                    var location = window.location.href;
                    var contextPath = '[[${#httpServletRequest.getContextPath()}]]';
                    console.log("分享-contextPath：" + contextPath);

                    let strings = location.split(contextPath);
                    // encodeURI不会对#编码 encodeURIComponent可以
                    // console.log("分享-文件名有特殊字符#：" + encodeURI($('#tarFile').html()));
                    // console.log("分享-文件名有特殊字符#：" + encodeURIComponent($('#tarFile').html()));
                    $.ajax({
                        url: "getQrCode?path=" + encodeURIComponent($('#tarFile').html()) + "&url=" + strings[0] + contextPath,
                        type: "get",
                        async: false,
                        success: function (data) {
                            var txt = "<img src='" + data['imgPath'] + "' style='width: 150px;height: 150px'/><br>" +
                                "<input style='width: 80%;font-size: 14px' value='" + data['url'] + "'/>";
                            var option = {
                                title: "分享你的文件",
                            };
                            window.wxc.xcConfirm(txt, "custom", option);
                        }
                    });
                }
            },
            {
                text: " 重命名",
                callback: function () {
                    let id = $('.flag td span').html();
                    let name = $('.flag td a').html();
                    let html = $('.flag td').eq(1).html($('' +
                        "<form id='updateFileNameForm' action='updateFileName' method='post'>" +
                        "<input id='updateFileName' name='myFileName' autocomplete='off' type='text' onblur='checkUpdateFile()' value='" + name + "'>" +
                        // post请求 不需要encode get请求才需要 参数直接拼接在url后面
                        "<input type='hidden' name='myFilePath' value='" + encodeURI(id) + "'>" +
                        "</form>" +
                        ''));
                }
            },
            {
                text: " 删除",
                callback: function () {
                    let id = $('#tarFile').html();
                    var location = window.location.href;
                    var contextPath = '[[${#httpServletRequest.getContextPath()}]]';
                    console.log("删除-contextPath：" + contextPath);
                    let strings = location.split(contextPath); //
                    if (id != "") {
                        window.location.href = strings[0] + contextPath + "/deleteFile?path=" + encodeURIComponent(id);
                    } else {
                        return;
                    }
                }
            }
        ]

    });
    $(".folders").contextMenu({
        width: 100, // width
        itemHeight: 30, // 菜单项height
        bgColor: "#fff", // 背景颜色
        color: "#333", // 字体颜色
        fontSize: 12, // 字体大小
        hoverBgColor: "#3498db", // hover背景颜色
        target: function (ele) { // 当前元素
            console.log(ele);
        },
        menu: [{ // 菜单项
            text: " 打开",
            callback: function () {
                let id = $('#tarFolder').html();
                console.log("打开", id)
                var location = window.location.href;
                let strings = location.split("?");
                console.log('右键菜单打开', strings, id)
                if (id != "") {
                    // 中文需要转义
                    window.location.href = strings[0] + "?path=" + encodeURI(id);
                } else {
                    return;
                }
            }
        },
            {
                text: " 返回上一级",
                callback: function () {
                    console.log("返回上一级")
                    toPreFolder();
                }
            },
            {
                text: " 重命名",
                callback: function () {
                    console.log("重命名")
                    let id = $('.flag td span').html();
                    let name = $('.flag td a').html();
                    let html = $('.flag td').eq(1).html($('' +
                        "<form id='updateFolderForm' action='updateFolder' method='post'>" +
                        "<input id='updateFolderName' name='fileFolderName' autocomplete='off' type='text' onblur='checkUpdateFolder()' value='" + name + "'>" +
                        "<input type='hidden' name='path' value='" + id + "'>" +
                        "</form>" +
                        ''));
                }
            },
            {
                text: " 新建文件夹",
                callback: function () {
                    addFolderElement();
                }
            },
            {
                text: " 清空并删除",
                callback: function () {
                    let id = $('#tarFolder').html();
                    var location = window.location.href;
                    let strings = location.split("moti-cloud");
                    if (id != "") {
                        window.location.href = strings[0] + "moti-cloud/deleteFolder?path=" + encode(id);
                    } else {
                        return;
                    }
                }
            }
        ]

    });
    $(".empty-space").contextMenu({
        width: 100, // width
        itemHeight: 30, // 菜单项height
        bgColor: "#fff", // 背景颜色
        color: "#333", // 字体颜色
        fontSize: 12, // 字体大小
        hoverBgColor: "#3498db", // hover背景颜色
        target: function (ele) { // 当前元素
            console.log(ele);
        },
        menu: [
            {
                text: " 新建文件夹",
                callback: function () {
                    addFolderElement();
                }
            },
            {
                text: " 返回上一级",
                callback: function () {
                    toPreFolder();
                }
            }
        ]

    });

    function toPreFolder() {
        var location = window.location.href;
        let strings = location.split("?");
        var now = $('#nowF').html();
        if (now != "") {
            // window.location.href = strings[0] + "?fId=" + pre;
            window.location.href = strings[0] + "?fId=-1&path=" + encodeURI(now);
        } else {
            return;
        }
    }

    function addFolderElement() {
        var now = $('#nowF').html();
        $("<tr class='files-items folders'><td><i style='font-size: 24px;color: orange' class='icon ion-android-folder'></i></td>" +
            "<td>" +
            "<form id='addFolderForm' action='addFolder' method='post'>" +
            "<input id='newFolder'  autocomplete='off' name='fileFolderName' type='text' onblur='checkAddFolder()'>" +
            // "<input type='hidden' name='parentFolderPath' value='" + encodeURI(now) + "'>" +
            "<input type='hidden' name='parentFolderPath' value='" + now + "'>" +
            "</form>" +
            "</td>" +
            "<td style='font-weight: 300'>文件夹</td>" +
            "<td style='font-weight: 300'>-</td>" +
            "<td style='font-weight: 300'>-</td>" +
            "</tr>").insertAfter($('#files-table-title'));
        $('#newFolder').focus();
    }

    function checkAddFolder() {
        var name = $.trim($("#newFolder").val());
        var nameReg = /^[\u4E00-\u9FA5A-Za-z0-9]{1,20}$/;
        if (!nameReg.test(name)) {
            alert("文件夹格式错误！【汉字、字母、数字】");
            var location = window.location.href;
            window.location.href = location;
        } else {
            $('#addFolderForm').submit();
        }
    }

    function checkUpdateFolder() {
        var name = $.trim($("#updateFolderName").val());
        var nameReg = /^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$/;
        if (!nameReg.test(name)) {
            alert("文件夹格式错误！【汉字、字母、数字】");
            var location = window.location.href;
            window.location.href = location;
        } else {
            $('#updateFolderForm').submit();
        }
    }

    function checkUpdateFile() {
        // var name = $.trim($("#updateFileName").val());
        // var nameReg = /^[^\u4E00-\u9FA5\uF900-\uFA2D\w-_|\.]{2,20}$/;
        // if (!nameReg.test(name)) {
        //     alert("文件格式错误！【汉字、字母、数字】");
        //     var location = window.location.href;
        //     window.location.href = location;
        // } else {
        //     $('#updateFileNameForm').submit();
        // }

        $('#updateFileNameForm').submit();
    }
</script>
<script src="file-manage/dist/modules/jquery.min.js"></script>
<script src="file-manage/dist/modules/popper.js"></script>
<script src="file-manage/dist/modules/tooltip.js"></script>
<script src="file-manage/dist/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="file-manage/dist/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="file-manage/dist/modules/scroll-up-bar/dist/scroll-up-bar.min.js"></script>
<script src="file-manage/dist/js/sa-functions.js"></script>

<script src="file-manage/dist/modules/chart.min.js"></script>
<script src="file-manage/dist/modules/summernote/summernote-lite.js"></script>

<script src="file-manage/dist/js/scripts.js"></script>
<script src="file-manage/dist/js/custom.js"></script>
<script src="file-manage/dist/js/demo.js"></script>
<script src="file-manage/dist/modules/chart.min.js"></script>
</body>
</html>
